<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Function start</title>
  <style>
    .msgBox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 242px;
      background: #eee;
    }

    .msgBox p {
      line-height: 1.5;
      padding: 10px 20px;
      color: #333;
      padding-left: 82px;
      background-position: 25px center;
      background-repeat: no-repeat;
    }

    .msgBox button {
      background: none;
      border: none;
      position: absolute;
      top: 0;
      right: 0;
      font-size: 1.1rem;
      color: #aaa;
    }
  </style>
</head>

<body>
  <button id="main">Display message box</button>

  <script>
    var btn = document.getElementById('main');
    btn.onclick = function() {
      displayMessage('wow,cool','warning')
      btn.disabled = 'disabled'
    }
    function displayMessage(msgText, msgType) {
      const html = document.querySelector('html');
      const panel = document.createElement('div');

      panel.setAttribute('class', 'msgBox');
      html.appendChild(panel);

      const msg = document.createElement('p');
      msg.textContent = msgText;
      panel.append(msg);

      const closeBtn = document.createElement('button');
      closeBtn.textContent = 'x';
      panel.appendChild(closeBtn);

      closeBtn.onclick = function () {
        panel.parentNode.removeChild(panel)
        btn.disabled = ''
      }
      if (msgType === 'warning') {
        panel.style.backgroundColor = 'orange'
      }
      else if (msgType === 'chat') {
        panel.style.backgroundColor = 'aqua';
      }
      else {
        panel.style.backgroundColor= 'skyblue'
      }
    }
  </script>
</body>

</html>